<template>
  <div class="h-full" :ref="drop" :style="{ backgroundColor: backgroundColor }">
    {{ collect }}
  </div>
</template>

<script setup>
import { ref, toRefs, computed, unref } from 'vue'
import { useDrop } from 'vue3-dnd'
import { ComponentTypes } from '../config/index'

const hasDropped = ref(false)
const hasDroppedOnChild = ref(false)

const [collect, drop] = useDrop(() => ({
  accept: ComponentTypes,
  drop(_item, monitor) {
    const didDrop = monitor.didDrop()
    if (didDrop) return
    const result = monitor.getDropResult()
    console.log('result', result)
    hasDropped.value = true
    hasDroppedOnChild.value = didDrop
  },
  collect: (monitor) => ({
    isOver: monitor.isOver(),
    isOverCurrent: monitor.isOver({ shallow: true })
  })
}))

const { isOver, isOverCurrent } = toRefs(collect)
const backgroundColor = computed(() => {
  let backgroundColor = 'rgba(0, 0, 0, .5)'

  if (unref(isOverCurrent) || unref(isOver)) {
    backgroundColor = 'darkgreen'
  }
  return backgroundColor
})
</script>
